<template>
  <div class="task">

    <div class="header" style="background-color: #00b386;" v-if="this.zhan===1">
      <div class="coin-header">
        <span>请先登录</span>
        <van-button type="info" round plain @click="toLogin()">登 录</van-button>
      </div>
    </div>
    <div v-if="this.zhan===2">
      <!-- 顶部信息栏 -->
      <div class="header" style="background-color: #00b386;" >
        <div class="coin-header">
          <span>我的汪汪粮</span>
          <span class="coin-amount">{{this.user.userglod2}}</span>
          <span class="coin-rule" @click="showCoinRule">汪汪粮说明</span>
        </div>
      </div>
      <!-- 签到卡片 -->
      <div class="sign-card">
        <div class="sign-info">
          <div class="sign-days">
            已连续签到{{continuousDays}} 天
            <span class="sign-record" @click="toShellRecord()">汪汪粮记录</span>
          </div>
          <div class="sign-tip">
            连续签到7天可获得 +1500 汪汪粮
            <van-button type="primary" size="small" @click="signIn()">签到</van-button>
          </div>

        </div>

        <!-- 签到进度条 -->
        <div class="sign-progress">
          <div class="progress-item" v-for="(coin, index) in signInCoins" :key="index">
            <div class="coin-circle" :class="{ active: index <= continuousDays-1 }">
              <van-icon v-if="index <= continuousDays-1" name="success" color="#00b386" size="24" />
              <van-icon v-else name="gold-coin-o" />
            </div>
            <div class="coin-value" :class="{ active: index <= continuousDays-1 }">+{{ coin }}</div>
            <div class="day-text">第{{ index + 1 }}天</div>
          </div>
        </div>
      </div>

      <!-- 新手任务 -->
      <div class="task-section">
        <div class="section-title">新手任务</div>
        <div class="task-list">
          <div class="task-item">
            <div class="task-icon">
              <van-image width="40" height="40" src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E7%8B%97%E7%B2%AE.png"/>
            </div>
            <div class="task-content">
              <div class="task-name">绑定邮箱</div>
              <div class="task-desc">在我的页面绑定邮箱，您可获得奖励！</div>
            </div>
            <div class="task-reward">
              <div class="reward-amount">+30,000</div>
              <van-button size="small" type="primary" round style="font-size: 14px" v-if="(this.user.useremail==null || this.user.useremail==='') && this.emailShell==null" @click="toHome()">去完成</van-button>
              <van-button size="small" plain type="primary" round color="#ff6034" style="font-size: 11px" v-else-if="this.user.useremail!=null && this.emailShell ===''" @click="receiveEmail()">立即领取</van-button>
              <van-button size="small" plain color="grey" round style="font-size: 14px" v-else>已领取</van-button>
            </div>
          </div>

          <div class="task-item">
            <div class="task-icon">
              <van-image width="40" height="40" src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E7%8B%97%E7%B2%AE.png"/>
            </div>
            <div class="task-content">
              <div class="task-name">绑定手机号！</div>
              <div class="task-desc">在设置里绑定您的手机号，您可获得奖励！</div>
            </div>
            <div class="task-reward">
              <div class="reward-amount">+35,000</div>
              <van-button size="small"  type="primary" round style="font-size: 14px" v-if="(this.user.userphone==null || this.user.userphone==='') && toHome.phoneShell==null" @click="toMine()">去完成</van-button>
              <van-button size="small" plain type="primary" round color="#ff6034" style="font-size: 11px" v-else-if="this.user.userphone!=null && this.phoneShell ===''" @click="receivePhone()">立即领取</van-button>
              <van-button size="small" plain color="grey" round style="font-size: 14px" v-else>已领取</van-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 日常任务 -->
      <div class="task-section">
        <div class="section-title">日常任务</div>
        <div class="task-list">
          <!-- 可以添加日常任务列表 -->
          <div class="task-item" v-for="(item,index) in taskList">
            <div class="task-icon">
              <van-image width="40" height="40" src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E7%8B%97%E7%B2%AE.png"/>
            </div>
            <div class="task-content">
              <div class="task-name">{{item.content}}</div>
              <div class="task-desc">{{item.describe}}</div>
            </div>
            <div class="task-reward">
              <div class="reward-amount">+{{item.shellNumber}}</div>
              <van-button size="small"  type="primary" round style="font-size: 14px" v-if="item.status==0" @click="toHome()">去完成</van-button>
              <van-button size="small" plain type="primary" round color="#ff6034" style="font-size: 11px" v-else-if="item.status==1" @click="toReceive(item.id)">立即领取</van-button>
              <van-button size="small" plain color="grey" round style="font-size: 14px" v-else>已领取</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog v-model="show" show-cancel-button>
      <h2 style="color: orangered">汪汪粮说明</h2>
      <div id="details" style="margin-left: 10px">
        <span><b>1.完成新手任务获得汪汪粮（每个用户限一次）。</b></span>
      </div>
      <div id="details" style="margin-left: 10px">
        <span><b>2.每日签到可获得汪汪粮，连续签到天数越多，汪汪粮越多。</b></span>
      </div>
      <div id="details" style="margin-left: 12px">
        <span><b>3.完成每日任务获得汪汪粮，完成越多，汪汪粮越多！</b></span>
      </div>
      <div id="details" style="margin-left: 10px">
        <span><b>4.阅读文章时可获得汪汪粮，阅读时间越长，获得的汪汪粮越多！！！</b></span>
      </div>
    </van-dialog>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTabbar" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="records" to="/task">任务</van-tabbar-item>
      <van-tabbar-item icon="bookmark-o" to="/bookshelf">书架</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'TaskView',
  data() {
    return {
      activeTabbar: 1,
      signInCoins: [50, 100, 150, 200, 300, 400, 500],
      continuousDays: 0,
      user: {},
      one:{},
      zhan:1,
      show:false,
      form:{},
      indexList:[1,2,3],
      taskList:[],
      dailyTasks:{},
      display: 1,
      update:{},
      lin:[1,2,3,4],
      emailShell:{},
      phoneShell:{},
      dailyShell:{},
    }
  },
  methods: {
    findOnePhone(){
      axios.post("http://localhost:9999/api-task/shellRecord/findOnePhone?id="+this.one.id).then(res=>{
        this.phoneShell = res.data;
      })
    },
    receivePhone(){
      axios.post("http://localhost:9999/api-task/shellRecord/saveReceivePhone?id="+this.one.id).then(res=>{
        this.$toast.success("领取成功");
        this.findOnePhone();
        this.findOneUser();
      })
    },
    findOneEmail(){
      axios.post("http://localhost:9999/api-task/shellRecord/findOneEmail?id="+this.one.id).then(res=>{
        this.emailShell = res.data;
      })
    },
    receiveEmail(){
      axios.post("http://localhost:9999/api-task/shellRecord/saveReceiveEmail?id="+this.one.id).then(res=>{
        this.$toast.success("领取成功");
        this.findOneEmail();
        this.findOneUser();
      })
    },
    toMine(){
      this.$router.push({
        path:"/userInfo",
        query:{id:this.user.id}
      })
    },
    toLogin(){
      this.$router.push("/login")
    },
    findOneUser(){
      axios.post("http://localhost:9999/api-user/user/findOneUser?id="+this.one.id).then(res=>{
        this.user = res.data;
      })
    },
    toHome(){
      this.$router.push("/")
    },
    toReceive(id){
      this.dailyShell.id = id;
      this.dailyShell.userId = this.user.id;
      axios.post("http://localhost:9999/api-task/task/receiveShell",this.dailyShell).then(res=>{
        this.$toast.success("领取成功");
        this.update.id = id;
        this.update.status = 2;
        this.update.userId = this.user.id;
        axios.post("http://localhost:9999/api-task/task/updateOne",this.update).then(res=>{
          this.findTaskList();
          this.findOneUser();
        })
      })
    },
    findDailyTasks(){
      axios.post("http://localhost:9999/api-task/dailyTasks/findList?userId="+this.one.id).then(res=>{
        this.dailyTasks = res.data;
        if (this.dailyTasks==null){
          axios.post("http://localhost:9999/api-task/dailyTasks/addDailyTasks?id="+this.one.id).then(res=>{
            console.log("添加了任务记录")
            this.findTaskList();
          })
        }
      },3000)
    },
    findTaskList(){
      axios.post("http://localhost:9999/api-task/task/findAll?userId="+this.one.id).then(res=>{
        this.taskList = res.data;
        if (this.taskList.length>0){
          console.log("有任务")
        }else{
          axios.post("http://localhost:9999/api-task/task/addTaskList?id="+this.one.id).then(res=>{
            console.log("添加了每日任务")
            this.findTaskList();
          })
        }
      },3000)
    },
    toShellRecord(){
      this.$router.push("/shellRecord")
    },
    signIn(){
      this.findTodayData();
    },
    findTodayData(){
      this.form.userId = this.user.id
      axios.post("http://localhost:9999/api-task/sign/findTodayData",this.form).then(res=>{
        if (res.data==null || res.data==''){
          axios.post("http://localhost:9999/api-task/sign/toSignIn?userId="+this.one.id).then(res=>{
            this.$toast.success("签到成功");
            this.findContinuous()
            this.findOneUser();
          })
        }else{
          this.$toast("您今天已经签到过了！")
        }
      })
    },
    findContinuous(){
      axios.post("http://localhost:9999/api-task/sign/findContinuous?userId="+this.one.id).then(res=>{
        this.continuousDays=res.data
      })
    },
    showCoinRule() {
      // 显示金币规则说明
      this.show = true;
    },
    judge(){
      this.taskList.forEach((item,index)=>{
        if ((index === 0 && this.dailyTasks.commentNumber>1) && item.status === 0){
          this.update.id = item.id;
          this.update.status = 1;
          axios.post("http://localhost:9999/api-task/task/updateOne",this.update).then(res=>{
            this.findTaskList()
            console.log("执行了")
          })
        }else if ((index === 1 && this.dailyTasks.chapterNumber>3) && item.status === 0){
          this.update.id = item.id;
          this.update.status = 1;
          axios.post("http://localhost:9999/api-task/task/updateOne",this.update).then(res=>{
            this.findTaskList()
            console.log("执行了")
          })
        }else if((index === 2 && this.dailyTasks.timeNumber>3600) && item.status === 0){
          this.update.id = item.id;
          this.update.status = 1;
          axios.post("http://localhost:9999/api-task/task/updateOne",this.update).then(res=>{
            this.findTaskList()
            console.log("执行了")
          })
        }else if ((index === 3 && this.dailyTasks.readingShell>1) && item.status === 0){
          this.update.id = item.id;
          this.update.status = 1;
          axios.post("http://localhost:9999/api-task/task/updateOne",this.update).then(res=>{
            this.findTaskList()
            console.log("执行了")
          })
        }else{
          console.log("没有满足条件")
        }
      })
    },
    checkAndExecute(){
      if (this.taskList.length > 0 && Object.keys(this.dailyTasks).length > 0) {
        // 在这里编写你要执行的方法逻辑，比如：
        console.log('两个数据都不为空，执行相关操作');
        // 可以调用其他函数、发送请求等等具体业务逻辑
        this.judge();
      }
    }
  },
  watch:{
    taskList: {
      handler(newVal, oldVal) {
        this.checkAndExecute();
      },
      deep: true
    },
    dailyTasks: {
      handler(newVal, oldVal) {
        this.checkAndExecute();
      },
      deep: true
    }
  },
  created() {
    this.one = JSON.parse(localStorage.getItem("user"))
    if (this.one==null){
      this.zhan =1;
    }else{
      this.zhan = 2;
      this.findOneUser();
      this.findContinuous();
      this.findOneEmail();
      this.findOnePhone();
      this.findTaskList();
      this.findDailyTasks();
    }
  },
}
</script>

<style scoped>
#details{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.task {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.header {
  padding: 20px 16px;
  color: white;
}

.coin-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.coin-amount {
  font-size: 24px;
  font-weight: bold;
}

.coin-rule {
  margin-left: auto;
}

.sign-card {
  margin: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.sign-info {
  margin-bottom: 20px;
}

.sign-days {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 8px;
}

.sign-record {
  color: #999;
  font-size: 14px;
}

.sign-tip {
  display: flex;
  justify-content: space-between;
  color: #ff6034;
  font-size: 14px;
}

.sign-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.coin-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.coin-circle.active {
  background: #e8f8f5;
}

.coin-value {
  color: #999;
  font-size: 12px;
}

.coin-value.active {
  color: #00b386;
}

.day-text {
  color: #999;
  font-size: 12px;
}

.task-section {
  margin: 16px;
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.task-item:last-child {
  border-bottom: none;
}

.task-content {
  flex: 1;
  margin: 0 12px;
}

.task-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.task-desc {
  color: #999;
  font-size: 12px;
}

.task-reward {
  text-align: right;
}

.reward-amount {
  color: #ff6034;
  font-weight: bold;
  margin-bottom: 4px;
}

:deep(.van-button--small) {
  padding: 0 16px;
}
</style>
